<!DOCTYPE html>
<html lang="en"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>Mosaic - UI Elements</title>

    <!-- Bootstrap core CSS -->
    <link href="css/bootstrap.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="css/color-styles.css" rel="stylesheet">
    <link href="css/ui-elements.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
    
    <!-- Resources -->
    <link href="css/animate.css" rel="stylesheet">
    <link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
    <link href='http://fonts.googleapis.com/css?family=Oswald:400,700,300' rel='stylesheet' type='text/css'>
    <link href='http://fonts.googleapis.com/css?family=Roboto:400,700,500,400italic,500italic,700italic' rel='stylesheet' type='text/css'>

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body class="body-green">

    <!-- Extra Bar -->
    <div class="mini-navbar mini-navbar-dark hidden-xs">
      <div class="container">
        <div class="col-sm-12">
          <a href="#" class="first-child"><i class="fa fa-envelope"></i> Email<span class="hidden-sm">: contact@example.com</span></a>
          <span class="phone">
            <i class="fa fa-phone-square"></i> Tel.: +0 (000) 000-00-00
          </span>
          <a href="sign-up.html" class="pull-right"><i class="fa fa-arrow-circle-down"></i> Sign Up</a>
          <a href="sign-in.html" class="pull-right"><i class="fa fa-sign-in"></i> Sign In</a>
          <a href="#" class="pull-right" id="nav-search"><i class="fa fa-search"></i> Search</a>
          <a href="#" class="pull-right hidden" id="nav-search-close"><i class="fa fa-times"></i></a>
          <!-- Search Form -->
          <form class="pull-right hidden" role="search" id="nav-search-form">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Search">
              <span class="input-group-btn">
                <button type="submit" class="btn btn-default"><i class="fa fa-search"></i></button>
              </span>
            </div>
          </form>
        </div>
      </div>
    </div>

    <div class="navbar navbar-dark navbar-static-top" role="navigation">
      <div class="container">

        <!-- Navbar Header -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html"><i class="fa fa-th-large"></i> The Mosaic <span class="hidden-sm">Business Template</span></a>
        </div> <!-- / Navbar Header -->

        <!-- Navbar Links -->
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="index.html" class="bg-hover-color">Home</a></li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Pages <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="about-us.html" class="bg-hover-color">About Us</a></li>
                <li><a href="coming-soon.html" class="bg-hover-color">Coming Soon</a></li>
                <li><a href="contact-us.html" class="bg-hover-color">Contact Us</a></li>
                <li><a href="dummy.html" class="bg-hover-color">Dummy Page</a></li>
                <li><a href="help-center.html" class="bg-hover-color">Help Center</a></li>
                <li><a href="help-answer.html" class="bg-hover-color">Help Item</a></li>
                <li><a href="pricing-table.html" class="bg-hover-color">Pricing Table</a></li>
                <li><a href="responsive-video.html" class="bg-hover-color">Responsive Video</a></li>
                <li><a href="services.html" class="bg-hover-color">Services</a></li>
                <li><a href="sign-in.html" class="bg-hover-color">Sign In</a></li>
                <li><a href="sign-in-alt.html" class="bg-hover-color">Sign In Option</a></li>
                <li><a href="sign-up.html" class="bg-hover-color">Sign Up</a></li>
                <li><a href="sign-up-alt.html" class="bg-hover-color">Sign Up Option</a></li>
                <li><a href="404-error.html" class="bg-hover-color">404 Error Page</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Portfolio <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="portfolio.html" class="bg-hover-color">Portfolio</a></li>
                <li><a href="portfolio-isotope.html" class="bg-hover-color">Portfolio Isotope</a></li>
                <li><a href="portfolio-item.html" class="bg-hover-color">Portfolio Item</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Blog <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="blog.html" class="bg-hover-color">Blog</a></li>
                <li><a href="blog-post.html" class="bg-hover-color">Blog Post</a></li>
              </ul>
            </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">Shop <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="shop.html" class="bg-hover-color">Shop Index</a></li>
                <li><a href="shop-products.html" class="bg-hover-color">Shop Products</a></li>
                <li><a href="shop-item.html" class="bg-hover-color">Shop Item</a></li>
                <li><a href="shop-cart.html" class="bg-hover-color">Shopping Cart</a></li>
                <li><a href="user-profile.html" class="bg-hover-color">User Profile</a></li>
              </ul>
            </li>
            <li class="dropdown active">
              <a href="#" class="dropdown-toggle bg-hover-color" data-toggle="dropdown">UI Elements <b class="caret"></b></a>
              <ul class="dropdown-menu">
                <li><a href="ui-elements.html#buttons" class="bg-hover-color">Buttons</a></li>
                <li><a href="ui-elements.html#panels" class="bg-hover-color">Panels</a></li>
                <li><a href="ui-elements.html#info-boards" class="bg-hover-color">Info Boards</a></li>
                <li><a href="ui-elements.html#navs" class="bg-hover-color">Navs</a></li>
                <li><a href="ui-elements.html#headlines" class="bg-hover-color">Headlines</a></li>
              </ul>
            </li>
          </ul>

          <!-- Search Form (xs) -->
          <form class="navbar-form navbar-left visible-xs" role="search">
            <div class="form-group">
              <input type="text" class="form-control" placeholder="Search">
            </div>
            <button type="submit" class="btn btn-default">Go!</button>
          </form> <!-- / Search Form (xs) -->

        </div> <!-- / Navbar Links -->
      </div> <!-- / container -->
    </div> <!-- / navbar -->

    <!-- Wrapper -->
    <div class="wrapper">

      <!-- Topic Header -->
      <div class="topic">
        <div class="container">
          <div class="row">
            <div class="col-sm-4">
              <h3 class="primary-font">UI Elements</h3>
            </div>
            <div class="col-sm-8">
              <ol class="breadcrumb pull-right hidden-xs">
                <li><a href="index.html">Home</a></li>
                <li class="active">UI Elements</li>
              </ol>
            </div>
          </div>
        </div>
      </div>

      <div class="container">
        <div class="row">
          <!-- Vertical Navigation -->
          <div class="col-md-3">
            <ul class="nav nav-pills nav-stacked bs-sidebar affix-top" data-spy="affix" data-offset-top="110" data-offset-bottom="365">
              <li class="active"><a href="#buttons" data-toggle="tab">Buttons</a></li>
              <li><a href="#panels" data-toggle="tab">Panels</a></li>
              <li><a href="#info-boards" data-toggle="tab">Info boards</a></li>
              <li><a href="#navs" data-toggle="tab">Navs</a></li>
              <li><a href="#headlines" data-toggle="tab">Headlines</a></li>
            </ul>            
          </div>
          <div class="col-md-9">

            <!-- Buttons -->
            <h2 class="headline first-child text-color" id="buttons">
              <span class="border-color">Buttons</span>
            </h2>
            <h3 class="primary-font">Classes</h3>
            <p>The Mosaic theme offers you new button classes that can be used along with the default Bootstrap 3 buttons:</p>
            <div class="panel panel-default">
              <div class="panel-heading">Example</div>
              <div class="panel-body">
                <a class="btn btn-green">Green</a> 
                <a class="btn btn-blue">Blue</a> 
                <a class="btn btn-orange">Orange</a> 
                <a class="btn btn-red">Red</a>
              </div>
              <div class="panel-footer">
                &lt;button type=<code>"button"</code> class=<code>"btn btn-green"</code>&gt;Green&lt;/button&gt;<br>
                &lt;button type=<code>"button"</code> class=<code>"btn btn-blue"</code>&gt;Blue&lt;/button&gt;<br>
                &lt;button type=<code>"button"</code> class=<code>"btn btn-orange"</code>&gt;Orange&lt;/button&gt;<br>
                &lt;button type=<code>"button"</code> class=<code>"btn btn-red"</code>&gt;Red&lt;/button&gt;<br>
              </div>
            </div>
            <h3 class="primary-font">Sizes</h3>
            <p>Fancy larger or smaller buttons? Add <code>.btn-lg</code>, <code>.btn-sm</code>, or <code>.btn-xs</code> for additional sizes.</p>
            <div class="panel panel-default">
              <div class="panel-heading">Example</div>
              <div class="panel-body">
                <p><a class="btn btn-lg btn-default">Large Button</a> <a class="btn btn-lg btn-green">Large Button</a> </p>
                <p><a class="btn btn-default">Default Button</a> <a class="btn btn-green">Default Button</a> </p>
                <p><a class="btn btn-sm btn-default">Small Button</a> <a class="btn btn-sm btn-green">Small Button</a> </p>
                <p><a class="btn btn-xs btn-default">Extra Small</a> <a class="btn btn-xs btn-green">Extra Small</a> </p>
              </div>
              <div class="panel-footer">
                <p>
                  &lt;button type=<code>"button"</code> class=<code>"btn btn-default btn-lg"</code>&gt;Large button&lt;/button&gt;<br>
                  &lt;button type=<code>"button"</code> class=<code>"btn btn-green btn-lg"</code>&gt;Large button&lt;/button&gt;<br>
                </p>
                <p>
                  &lt;button type=<code>"button"</code> class=<code>"btn btn-default"</code>&gt;Default button&lt;/button&gt;<br>
                  &lt;button type=<code>"button"</code> class=<code>"btn btn-green"</code>&gt;Default button&lt;/button&gt;<br>
                </p>
                <p>
                  &lt;button type=<code>"button"</code> class=<code>"btn btn-default btn-sm"</code>&gt;Small button&lt;/button&gt;<br>
                  &lt;button type=<code>"button"</code> class=<code>"btn btn-green btn-sm"</code>&gt;Small button&lt;/button&gt;<br>
               </p>
                <p>
                  &lt;button type=<code>"button"</code> class=<code>"btn btn-default btn-xs"</code>&gt;Extra small button&lt;/button&gt;<br>
                 &lt;button type=<code>"button"</code> class=<code>"btn btn-green btn-xs"</code>&gt;Extra small button&lt;/button&gt;<br>
                </p>
              </div>
            </div>

            <!-- Panels -->
            <h2 class="headline text-color" id="panels">
              <span class="border-color">Panels</span>
            </h2>
            <p>
              While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
              <br />
              In the Mosaic template we have added several new classes to the panel element. For full documentation on panels, please refer to the official <a href="http://getbootstrap.com/components/#panels">Bootstrap page</a>.
            <div class="panel panel-default">
              <div class="panel-heading">Example</div>
              <div class="panel-body">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="panel panel-green">
                      <div class="panel-heading">Panel Title</div>
                      <div class="panel-body">
                        Panel Content
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="panel panel-blue">
                      <div class="panel-heading">Panel Title</div>
                      <div class="panel-body">
                        Panel Content
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="panel panel-orange">
                      <div class="panel-heading">Panel Title</div>
                      <div class="panel-body">
                        Panel Content Panel Content Panel Content Panel Content Panel Content Panel Content Panel Content Panel Content
                      </div>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="panel panel-red">
                      <div class="panel-heading">Panel Title</div>
                      <div class="panel-body">
                        Panel Content
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="panel-footer">
                &lt;div class=<code>"panel panel-green"</code>&gt; ... &lt;/div&gt;<br>
                &lt;div class=<code>"panel panel-blue"</code>&gt; ... &lt;/div&gt;<br>
                &lt;div class=<code>"panel panel-orange"</code>&gt; ... &lt;/div&gt;<br>
                &lt;div class=<code>"panel panel-red"</code>&gt; ... &lt;/div&gt;<br>
              </div>
            </div>
            
            <!-- Info Boards -->
            <h2 class="headline text-color" id="info-boards">
              <span class="border-color">Info Boards</span>
            </h2>
            <p>You can emphasize some contents by wrapping it in a .info-board. Four classes are available:</p>
            <div class="panel panel-default">
              <div class="panel-heading">Example</div>
              <div class="panel-body">
                <div class="row">
                  <div class="col-sm-6">
                    <div class="info-board info-board-green">
                      <h4>Info board title</h4>
                      <p>Info board content</p>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="info-board info-board-blue">
                      <h4>Info board title</h4>
                      <p>Info board content</p>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="info-board info-board-orange">
                      <h4>Info board title</h4>
                      <p>Info board content Info board content Info board content Info board content Info board content</p>
                    </div>
                  </div>
                  <div class="col-sm-6">
                    <div class="info-board info-board-red">
                      <h4>Info board title</h4>
                      <p>Info board content</p>
                    </div>
                  </div>
                </div>
              </div>
              <div class="panel-footer">
                &lt;div class=<code>"info-board info-board-green"</code>&gt; ... &lt;/div&gt;<br>
                &lt;div class=<code>"info-board info-board-blue"</code>&gt; ... &lt;/div&gt;<br>
                &lt;div class=<code>"info-board info-board-orange"</code>&gt; ... &lt;/div&gt;<br>
                &lt;div class=<code>"info-board info-board-red"</code>&gt; ... &lt;/div&gt;<br>
              </div>
            </div>

            <!-- Navs -->
            <h2 class="headline text-color" id="navs">
              <span class="border-color">Navs</span>
            </h2>            
            <p>Navs available in Bootstrap have shared markup, starting with the base <code>.nav</code> class, as well as shared states. Swap modifier classes to switch between each style.</p>
            <h3 class="primary-font">Tabs</h3>
            <p>Note the <code>.nav-tabs</code> class requires the <code>.nav</code> base class.</p>
            <div class="panel panel-default">
              <div class="panel-heading">Example</div>
              <div class="panel-body">
                <ul class="nav nav-tabs">
                  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                  <li><a href="#profile" data-toggle="tab">Profile</a></li>
                  <li><a href="#messages" data-toggle="tab">Messages</a></li>
                  <li><a href="#settings" data-toggle="tab">Settings</a></li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane active" id="home">Home tab content</div>
                  <div class="tab-pane" id="profile">Profile tab content</div>
                  <div class="tab-pane" id="messages">Message tab content</div>
                  <div class="tab-pane" id="settings">Settings tab content</div>
                </div>
              </div>
              <div class="panel-footer">
                &lt;ul class=<code>"nav nav-tabs"</code>&gt;<br>
                <span class="tab-1"></span>&lt;li class=<code>"active"</code>&gt;&lt;a href=<code>"#home"</code> data-toggle=<code>"tab"</code>&gt;Home&lt;/a&gt;&lt;/li&gt;<br>
                <span class="tab-1"></span>&lt;li&gt;&lt;a href=<code>"#profile"</code> data-toggle=<code>"tab"</code>&gt;Profile&lt;/a&gt;&lt;/li&gt;<br>
                <span class="tab-1"></span>&lt;li&gt;&lt;a href=<code>"#messages"</code> data-toggle=<code>"tab"</code>&gt;Messages&lt;/a&gt;&lt;/li&gt;<br>
                <span class="tab-1"></span>&lt;li&gt;&lt;a href=<code>"#settings"</code> data-toggle=<code>"tab"</code>&gt;Settings&lt;/a&gt;&lt;/li&gt;<br>
                &lt;/ul&gt;<br><br>
                &lt;div class=<code>"tab-content"</code>&gt;<br>
                <span class="tab-1"></span>&lt;div class=<code>"tab-pane active"</code> id=<code>"home"</code>&gt;Home tab content&lt;/div&gt;<br>
                <span class="tab-1"></span>&lt;div class=<code>"tab-pane"</code> id=<code>"profile"</code>&gt;Profile tab content&lt;/div&gt;<br>
                <span class="tab-1"></span>&lt;div class=<code>"tab-pane"</code> id=<code>"messages"</code>&gt;Message tab content&lt;/div&gt;<br>
                <span class="tab-1"></span>&lt;div class=<code>"tab-pane"</code> id=<code>"settings"</code>&gt;Settings tab content&lt;/div&gt;<br>
                &lt;/div&gt;
              </div>
            </div>
            <!-- Pills -->
            <h3 class="primary-font">Pills</h3>
            <p>Take that same HTML, but use <code>.nav-pills</code> instead.</p>
            <div class="panel panel-default">
              <div class="panel-heading">Example</div>
              <div class="panel-body">
                <ul class="nav nav-pills">
                  <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                  <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
                  <li><a href="#messages" data-toggle="tab">Messages</a></li>
                  <li><a href="#settings" data-toggle="tab">Settings</a></li>
                </ul>
                <div class="tab-content">
                  <div class="tab-pane active" id="home2">Home tab content</div>
                  <div class="tab-pane" id="profile2">Profile tab content</div>
                  <div class="tab-pane" id="messages2">Message tab content</div>
                  <div class="tab-pane" id="settings2">Settings tab content</div>
                </div>
              </div>
              <div class="panel-footer">
                &lt;ul class=<code>"nav nav-pills"</code>&gt;<br>
                <span class="tab-1"></span>&lt;li class=<code>"active"</code>&gt;&lt;a href=<code>"#home"</code> data-toggle=<code>"tab"</code>&gt;Home&lt;/a&gt;&lt;/li&gt;<br>
                <span class="tab-1"></span>&lt;li&gt;&lt;a href=<code>"#profile"</code> data-toggle=<code>"tab"</code>&gt;Profile&lt;/a&gt;&lt;/li&gt;<br>
                <span class="tab-1"></span>&lt;li&gt;&lt;a href=<code>"#messages"</code> data-toggle=<code>"tab"</code>&gt;Messages&lt;/a&gt;&lt;/li&gt;<br>
                <span class="tab-1"></span>&lt;li&gt;&lt;a href=<code>"#settings"</code> data-toggle=<code>"tab"</code>&gt;Settings&lt;/a&gt;&lt;/li&gt;<br>
                &lt;/ul&gt;<br><br>
                &lt;div class=<code>"tab-content"</code>&gt;<br>
                <span class="tab-1"></span>&lt;div class=<code>"tab-pane active"</code> id=<code>"home"</code>&gt;Home tab content&lt;/div&gt;<br>
                <span class="tab-1"></span>&lt;div class=<code>"tab-pane"</code> id=<code>"profile"</code>&gt;Profile tab content&lt;/div&gt;<br>
                <span class="tab-1"></span>&lt;div class=<code>"tab-pane"</code> id=<code>"messages"</code>&gt;Message tab content&lt;/div&gt;<br>
                <span class="tab-1"></span>&lt;div class=<code>"tab-pane"</code> id=<code>"settings"</code>&gt;Settings tab content&lt;/div&gt;<br>
                &lt;/div&gt;
              </div>
            </div>
            <p>Choose one of the four colors by adding an exta class:</p>
            <div class="panel panel-default">
              <div class="panel-heading"> Example</div>
              <div class="panel-body">
                <div class="row">
                  <div class="col-md-6 col-sm-12">
                    <ul class="nav nav-pills nav-pills-green">
                      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                      <li><a href="#profile" data-toggle="tab">Profile</a></li>
                      <li><a href="#messages" data-toggle="tab">Messages</a></li>
                      <li><a href="#settings" data-toggle="tab">Settings</a></li>
                    </ul>
                  </div>
                  <div class="col-md-6 col-sm-12">
                    <ul class="nav nav-pills nav-pills-blue">
                      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                      <li><a href="#profile" data-toggle="tab">Profile</a></li>
                      <li><a href="#messages" data-toggle="tab">Messages</a></li>
                      <li><a href="#settings" data-toggle="tab">Settings</a></li>
                    </ul>
                  </div>
                </div>
                <div class="row">
                  <div class="col-md-6 col-sm-12">
                    <ul class="nav nav-pills nav-pills-orange">
                      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                      <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
                      <li class=""><a href="#messages" data-toggle="tab">Messages</a></li>
                      <li class=""><a href="#settings" data-toggle="tab">Settings</a></li>
                    </ul>
                  </div>
                  <div class="col-md-6 col-sm-12">
                    <ul class="nav nav-pills nav-pills-red">
                      <li class="active"><a href="#home" data-toggle="tab">Home</a></li>
                      <li class=""><a href="#profile" data-toggle="tab">Profile</a></li>
                      <li class=""><a href="#messages" data-toggle="tab">Messages</a></li>
                      <li class=""><a href="#settings" data-toggle="tab">Settings</a></li>
                    </ul>
                  </div>
                </div>
              </div>
              <div class="panel-footer">
                &lt;ul class=<code>"nav nav-pills nav-pills-green"</code>&gt; ... &lt;/ul&gt;<br>
                &lt;ul class=<code>"nav nav-pills nav-pills-blue"</code>&gt; ... &lt;/ul&gt;<br>
                &lt;ul class=<code>"nav nav-pills nav-pills-orange"</code>&gt; ... &lt;/ul&gt;<br>
                &lt;ul class=<code>"nav nav-pills nav-pills-red"</code>&gt; ... &lt;/ul&gt;<br>
              </div>
            </div>

            <!-- Headlines -->
            <h2 class="headline text-color" id="headlines">
              <span class="border-color">Headlines</span>
            </h2>            
            <p>Use the code below to add a headline on your page:</p>
            <div class="panel panel-default">
              <div class="panel-heading">Example</div>
              <div class="panel-body">
                <h2 class="headline text-color">
                  <span class="border-color">Headline</span>
                </h2>
              </div>
              <div class="panel-footer">
                &lt;h2 class="<code>headline text-color</code>"&gt;<br />
                <span class="tab-1"></span>&lt;span class="<code>border-color</code>"&gt;Headlines&lt;/span&gt;<br />
                &lt;/h2&gt;
              </div>
            </div>

          </div>
        </div> <!-- / .row -->
      </div> <!-- / .container -->

    </div> <!-- / .wrapper -->

    <!-- Footer -->
    <footer class="footer-dark">
      <div class="container">
        <div class="row">
          <!-- Contact Us -->
          <div class="col-sm-4">
            <h3 class="text-color"><span class="border-color">Contact Us</span></h3>
            <div class="content">
              <p>
              San Francisco, CA 94101<br />
              1987 Lincoln Street<br />
              Phone: +0 000 000 00 00<br />
              Fax: +0 000 000 00 00<br />
              Email: <a href="#">admin@mysite.com</a>
              </p>
            </div>
          </div>
          <!-- Social icons -->
          <div class="col-sm-4">
            <h3 class="text-color"><span>Go Social</span></h3>
            <div class="content social">
              <p>Stay in touch with us:</p>
              <ul class="list-inline">
                  <li><a href="#" class="twitter"><i class="fa fa-twitter"></i></a></li>
                <li><a href="#" class="facebook"><i class="fa fa-facebook"></i></a></li>
                <li><a href="#" class="pinterest"><i class="fa fa-pinterest"></i></a></li>
                <li><a href="#" class="github"><i class="fa fa-github"></i></a></li>
                <li><a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a></li>
                <li><a href="#" class="vk"><i class="fa fa-vk"></i></a></li>
                <li><a href="#" class="plus"><i class="fa fa-google-plus"></i></a></li>
              </ul>
              <div class="clearfix"></div>
            </div>
          </div>
          <!-- Subscribe -->
          <div class="col-sm-4">
            <h3 class="text-color"><span>Subscribe</span></h3>
            <div class="content">
              <p>Enter your e-mail below to subscribe to our free newsletter.<br />We promise not to bother you often!</p>
              <form class="form" role="form">
                <div class="row">
                  <div class="col-sm-8">
                    <div class="input-group">
                      <label class="sr-only" for="subscribe-email">Email address</label>
                      <input type="email" class="form-control" id="subscribe-email" placeholder="Enter email">
                      <span class="input-group-btn">
                        <button type="submit" class="btn btn-default">OK</button>
                      </span>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
        <div class="row">
          <div class="col-sm-12">
            <hr>
          </div>
        </div>
        <!-- Copyrights -->
        <div class="row">
          <div class="col-sm-12">
            <p>&copy; Mosaic 2014. <a href="#">Privacy Policy</a> | <a href="#">Terms of Service</a></p>
          </div>
        </div>
      </div>
    </footer>

    <!-- Style Toggle -->
    <div class="style-toggle text-left hidden-xs">
      <i class="fa fa-gears style-toggle-btn"></i>
      <div class="style-toggle-header text-center">
        Navbar Type
      </div>
      <!-- Navbar Type -->
      <div class="style-toggle-body text-left">
        <div class="radio">
          <label>
            <input type="radio" name="navbar" id="opt-navbar-dark" value="opt-navbar-dark" checked>
            Navbar Dark (default)
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="navbar" id="opt-navbar-white" value="opt-navbar-white">
            Navbar White
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="navbar" id="opt-navbar-mixed" value="opt-navbar-mixed">
            Navbar Mixed
          </label>
        </div>
      </div>
      <!-- Color Styles-->
      <div class="style-toggle-header text-center">
        Color Styles
      </div>
      <div class="style-toggle-body text-center">
        <ul class="colors list-inline">
          <li class="green"></li>
          <li class="blue"></li>
          <li class="orange"></li>
          <li class="red"></li>
        </ul>
      </div>
      <!-- Footer Type -->
      <div class="style-toggle-header text-center">
        Footer Type
      </div>
      <div class="style-toggle-body text-left">
        <div class="radio">
          <label>
            <input type="radio" name="footer" id="opt-footer-dark" value="opt-footer-dark" checked>
            Footer Dark (default)
          </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="footer" id="opt-footer-white" value="opt-footer-white">
            Footer White
          </label>
        </div>
        <hr>
        <a href="theme-faq.html"><i class="fa fa-question-circle"></i> Using color schemes on a production site.</a>
      </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/scrolltopcontrol.js"></script>
    <script src="js/jquery.sticky.js"></script>
    <script src="js/custom.js"></script>

</body></html>